<template>
  <div id="edit-form">
    <h2>{{name}}</h2>
    <el-form :model="blog" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm">
      <el-form-item prop="title" label="标题:">
        <el-input class="el-input" v-model="blog.title" placeholder="请输入标题"/>
      </el-form-item>
      <el-form-item prop="categories" label="分类:">
        <el-input v-model="blog.categories" placeholder="请输入分类"/>
      </el-form-item>
      <el-form-item label="简介:">
        <el-input v-model="blog.description" placeholder="请输入简介"/>
      </el-form-item>
      <el-form-item label="内容:">
        <mavon-editor ref="md" v-model="blog.content" @imgAdd="addImg" @imgDel="delImg"/>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button type="success" class="submit-button" @click="submitClick">提交</el-button>
      <el-button class="cancel-button" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script>
import {getBlogById, addBlog, updateBlog} from "@/network/blogRequest";
import {addFile, deleteFile} from "@/network/fileRequest";

export default {
  name: "EditForm",
  data() {
    return {
      name: "",
      blog: {
        id: "",
        title: "",
        description: "",
        content: "",
        created: "",
        updated: "",
        categories: ""
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur'}
        ],
        categories: [
          { required: true, message: '请输入分类', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    /**
     * 网络请求
     */
    getBlogById(id) {
      getBlogById(id).then(res => {
        this.blog = res.data;
      })
    },

    /**
     * 按钮点击
     */
    submitClick() {
      this.$refs.ruleForm.validate((valid) => {
        if(valid) {
          if(this.blog.id) {
            updateBlog(this.blog).then(res => {
              alert("修改成功");
              this.$router.replace("/user/blog/edit");
            })
          }else {
            addBlog(this.blog).then(res => {
              alert("添加成功");
              this.$router.replace("/user/blog/edit");
            })
          }
        }else {
          return false;
        }
      })
    },
    cancelClick() {
      deleteFile(JSON.stringify(this.blog.id), JSON.stringify(""));
      this.blog.id = "";
      this.blog.title = "";
      this.blog.description = "";
      this.blog.content = "";
      this.$router.replace("/user/blog/edit")
    },

    /**
     * mavon-editor图片添加和删除
     */
    addImg(filename, file) {
      const img = new FormData();
      img.append("file", file);
      let message = JSON.stringify(this.blog.id);
      addFile(message, img).then(res => {
        this.$refs.md.$img2Url(filename, res.data)
      })
    },
    delImg(fileName) {
      const message = JSON.stringify(this.blog.id);
      deleteFile(message, fileName[0]);
    }
  },
  created() {
    const id = this.$route.params.blogId;
    if(id) {
      this.getBlogById(id);
      this.name = "编辑博客"
    }else {
      this.name = "新增博客"
    }
  }
}
</script>

<style scoped>
  #edit-form {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #d5d5d5;
    padding: 40px 55px 40px 10px;
  }

  #edit-form h2 {
    text-align: center;
    margin-bottom: 30px;
  }

  #edit-form span {
    float: left;
  }

  #edit-form .el-input {
    float: left;
  }

  .button {
    text-align: center;
  }
</style>